<template>
	<!-- paysucceed支付成功 -->
	<view class="p_wp">
		<!-- <nav-public :title="'支付结果'" :background="'#9532E4'" :color="'white'"></nav-public> -->
		<view class="top">
			<view class="t_flex">
				<!-- <image src="/static/jiujiu.png" class="logo"></image> -->
				<image :src="info.logo" class="logo"></image>
				<image src="/static/dui.png" mode="widthFix"></image>
				<view class="t_pay">
					<view class="t_succ">支付成功！</view>
					<view>感谢您的购买！</view>
				</view>
			</view>
			<view class="dynamic">
				<!-- <view style="word-break: break-all;">{{param}}</view> -->
				<uni-dateformat :date="timer" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>
		<view class="info">
			<view class="bg"></view>
			<view class="content">
				<view class="tit"><text>￥</text>{{info.price}}<text class="tit_small" v-if="info.checkthumb!==''">待核销</text></view>
				<view class="con_name">{{info.supname}}</view>
				<view class="flex_between" v-if="info.btmoney>0">
					<view><text class="left">最高补贴:</text>{{info.btmoney}}<text style="color:red;">(排队中)</text></view>
					<view class="pub_gray" @click="navOrder(4)">查看排队明细>></view>
				</view>
				<view><text class="left">下单时间:</text>{{info.paytime}}</view>
			</view>
			<!-- <view class="content">
				<view class="tit"><text>￥</text>100</view>
				<view class="con_name">多米街化妆品</view>
				<view><text class="left">补贴金额:</text>30<text style="color:red;">(排队中)</text></view>
				<view><text class="left">下单时间:</text>2024-08-19 17:05:26</view>
			</view> -->
		</view>
		<view class="he_xiao" v-if="info.checkthumb!==''">
			<image @longtap="saveImage" :src="info.checkthumb" mode="widthFix"></image>
			<view class="message">
				出示券码，收银员需确认核销
			</view>
		</view>
		<!-- 秒杀 -->
		<!-- <view class="shops" v-if="seckillList.length>0&&info.checkthumb==''">
			<view class="s_logo" @click="$navTo('/pages/mallHome/index')"><image src="/static/seckill.png"></image></view>
			<view class="tit" @click="$navTo('/pages/mallHome/index')">限时秒杀</view>
			<scroll-view class="shop" scroll-x="true">
				<view class="shop_item" v-for="item in seckillList" @click="$navTo('/pages/product/product?id='+item.id)">
					<view class="shop_img">
						<image :src="item.thumb"></image>
						<view class="price"><text class="small">￥</text>{{item.saleprice}}</view>
					</view>
					<view class="title clamp"><text>{{item.title}}</text></view>
				</view>
			</scroll-view>
		</view> -->
		<!-- <view class="JcurSkill_lists"> -->
		<view class="JcurSkill_lists" v-if="list.length>0&&info.checkthumb==''">
			<view class="list" v-for="item in list" :key="item.uid" @click="$navTo('/pages/shoplist/shopgoods?id='+item.uid)">
				<view class="body">
					<view class="logo">
						<image :src="item.logo"></image>
					</view>
					<view class="JcurSkill_list_cont">
						<view class="title">
							<view class="flex_title">
								<!-- <text class="icon1" v-if="item.paymode==0">折</text> -->
								<text>{{item.supname}}</text>
								<text class="icon" v-if="item.ispig==1">清真</text>
							</view>
						</view>
						<view class="label flex">
							<view class="other">
								<text class="gray">{{item.avgsale}}元/人</text>
								<text class="">{{item.browerNum}}人进店</text>
							</view>
							<view class="addre" @click.stop="openMap(item)">
								<image src="/static/index/dizhi.png" mode="widthFix"></image>
								<text>{{item.distance}}</text>
							</view>
						</view>
						<view class="label flex">
							<view class="other">已售{{item.orderNum}}单</view>
							<view class="flex short_add">
								<view class="r_border" v-if="item.shorttitle!=''">{{item.shorttitle}}</view>
								<view class="s_tit">{{item.shortaddress}}</view>
							</view>
						</view>
						<view class="label flex">
							<view class="other">最高补贴<text class="aggravation">{{item.pdiscount}}%</text>现金</view>
							<view class="orderBuy" v-if="item.openpay==1" @click.stop="discountOrder(item.uid)">线下买单</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif" ></image>
				<view v-if="ismore">到底了~</view>
			</view>
		</view>
		<view class="paysu_btns">
			<view class="go_home" @click="$navTo('/pages/index/index')">逛逛其他门店</view>
			<view class="go_home" @click="$navTo('/pages/mallHome/selfMall')">返回首页</view>
		</view>
		<uni-popup ref="bind" type="dialog" :is-mask-click="false">
			<view class="nobind">
				<view>获取更多优惠，请完善联系方式</view>
				<button class="l_w_login" open-type="getPhoneNumber" @getphonenumber="getUserProfile">一键绑定手机号</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				paysn: '',
				info: {
					discountprice: 0,
					ordersn:'',
					paytime: '',
					price: '',
					realprice: '',
					supname: '',
					checkthumb:''
				},
				timer: '',
				timeObj: '',
				shopList: [],//本店团购
				groupList: [],//团购热销，
				marketList: [],//超市商品
				seckillList:[],//秒杀商品
				timer2: null,
				area: '',
				list: [],//店铺列表
				page: 0,
				isloading: false,
				ismore: false,
				tradeNo: '',
				// param:''
			}
		},
		computed: {
		  	...mapState(['Location'])
		},
		async onLoad(option) {
			// this.param = option
			if(option.paysn){
				this.paysn = option.paysn;
			}
			if(option.tradeNo){
				this.tradeNo = option.tradeNo;
			}
			this.getInfo();
			this.getTime();
			// this.getmarketList();//本地超市
			// this.getBindPhone();//是否绑定手机号
			// this.getGroupList();//热销团购
			this.getSeckillList();//秒杀
			this.getLocation();
			this.timer2 = setInterval(() =>{
				this.getInfo();
			},1000)
			await this.$onLaunched;
			this.getShopList();//店铺列表
		},
		onUnload(){
			clearInterval(this.timeObj)
			this.timeObj = null;
			clearInterval(this.timer2)
			this.timer2 = null;
		},
		onReachBottom() {
			this.getShopList();//店铺列表
		},
		methods: {
			// 跳转对应订单页
			navOrder(id) {
				uni.setStorageSync('upOrderType', id);
				this.$navTo('/pages/index/order');
			},
			getLocation(){
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					altitude: true,
					success:res=> {
						console.log('成功',res)
						that.$store.commit('upLocation', {
							x: res.longitude,
							y: res.latitude
						})
						uni.setStorageSync('x',res.longitude);
						uni.setStorageSync('y',res.latitude);
						that.$isResolve();
					},
					fail:err=> {
						console.log('失败',err)
						that.$isResolve();
					},
					complete:com=> {
						console.log('失败',com)
						that.$isResolve();
					}
				});
			},
			discountOrder(id) {
				this.$axios('supplierGoods/payCode', 'POST', 'shop', {
					supplier_uid: id
				}).then(res => {
					if (res.data.code == 200) {
						this.$navTo(res.data.data);
					}
				})
			},
			// 是否绑定手机号
			getBindPhone(){
				this.$axios('Info/member_info', "POST", 'member').then(res => {
					if (res.data.code = 200) {
						if(res.data.data.member.mobile==''||res.data.data.member.mobile.length<1||res.data.data.member.mobile===null||res.data.data.member.mobile==undefined){
							this.$refs.bind.open();
						}
					}
				})
			},
			getShopList() {
				this.page++;
				let dataObj = {
					page: this.page
				}
				let obj = {
					...dataObj,
					...this.Location
				};
				if(obj.x==''){
					obj.x = uni.getStorageSync('x');
					obj.y = uni.getStorageSync('y');
				}
				this.isloading = true;
				this.ismore = false;
				this.$axios('o2o/shoplist', 'POST', 'shop', obj).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data];
						this.ismore = res.data.data.length <= 0;
					}
				})
			
			},
			// 热销团购
			getGroupList(){
				this.$axios('home/homegroup', 'POST', 'shop', this.Location).then((res => {
					if (res.data.code == 200) {
						this.groupList = res.data.data.list;
						this.area = res.data.data.title;
					}
				}))
			},
			// 秒杀
			getSeckillList(){
				this.$axios('home/getCurSkill', 'POST', 'shop').then(res=>{
					if(res.data.code == 200){
						this.seckillList = res.data.data.goodsList0;
					}
				})
			},
			// 本地团购
			getList(uid) {
				this.$axios('supplierGoods/goodsList', 'POST', 'shop', {
					uid
				}).then(res => {
					if (res.data.code == 200) {
						if(res.data.data&&res.data.data.length>0){
							if(res.data.data[0].title=="团购"){
								this.shopList = res.data.data[0].goodsList;
							}
						}
					}
				})
			},
			// 本地超市
			getmarketList() {
				// this.Location.x = 113.66072;
				// this.Location.y = 34.79977;
				this.$axios('market/tops', 'POST', 'shop', this.Location).then(res => {
					if (res.data.code == 200) {
						this.marketList = res.data.data;
					}
				})
			},
			getTime(){
			   this.timeObj = setInterval(() =>{
				   this.timer = Date.now()
				},1000)
			},
			 saveImage() {
				var that = this;
				uni.showModal({
					title: '保存',
					content: '保存核销码？',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.info.checkthumb,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								}
							});
						}
					}
				});
			},
			getInfo() {
				this.$axios('paytrans/payorder', 'POST', 'order', {
					paysn: this.paysn,
					tradeNo: this.tradeNo
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						this.getList(this.info.uid);
						if(this.info.checkthumb==''){
							clearInterval(this.timer2)
							this.timer2 = null;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		color: $font-color-base;
		padding-bottom: 100upx;
		background: #FBF8FE;
	}
	.p_wp{
		background: #FBF8FE;
		padding-bottom: 140rpx;
	}
	.top{
		background: #9532E4;
		padding: 20rpx 0 60rpx;
		.t_flex{
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 108rpx;
			}
			.logo{
				width: 116rpx;
				height: 116rpx;
				border-radius: 12rpx;
				border: 2rpx solid #FFFFFF;
				margin-right: 30rpx;
			}
			.t_pay{
				color: #FFFFFF;
				font-size: 24rpx;
				padding-left: 30rpx;
				.t_succ{
					font-size: 40rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
				}
			}
		}
		.dynamic{
			font-size: 40rpx;
			font-weight: 600;
			text-align: center;
			color: #fff;
			margin-top: 20rpx;
		}
	}
	.info{
		width:90%;
		margin: 0 auto;
		margin-top: -40rpx;
		.bg{
			width: 100%;
			height: 18rpx;
			background: #6303AE;
			border-radius: 12rpx;
		}
		.content{
			width: 95%;
			// height: 400rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 14rpx 0rpx #E7CAFF;
			border-radius: 0rpx 0rpx 12rpx 12rpx;
			padding: 0 20rpx 12rpx;
			color: #333333;
			margin: 0 auto;
			margin-top: -6rpx;
			view{
				line-height: 52rpx;
				.left{
					margin-right: 20rpx;
				}
			}
			.con_name{
				font-weight: 600;
				font-size: 32rpx;
				text-align: center;
			}
			.tit{
				font-size: 48rpx;	
				font-weight: 600;
				border-bottom: 1rpx solid #DEDEDE;
				padding: 20rpx 0px;
				margin-bottom: 18rpx;
				text-align: center;
				.tit_small{
					display: block;
					line-height: 1;
				}
				text{
					font-size: 28rpx;
				}
			}
		}
	}
	.he_xiao{
		text-align: center;
		image{
			margin-top: 50rpx;
			width: 230rpx;
			margin-bottom: 20rpx;
		}
		.message{
			font-size: 28rpx;
			color: #333333;
		}
	}
	.shops{
		// padding: 0 20rpx 0 0;
		background: #fff;
		display: flex;
		border-radius: 12rpx;
		margin: 20rpx 20rpx 0;
		height: 188rpx;
		position: relative;
		background-size: 100% 100%;
		.s_logo{
			width: 168rpx;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.tit{
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 600;
			position: absolute;
			left: 20rpx;
			top: 20rpx;
		}
		.s_left{
			width: 168rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			text-align: center;
			padding-top: 22rpx;
			image{
				width: 102rpx;
				height: 102rpx;
				border-radius: 12rpx;
			}
		}
			.shop{
				width: calc(100% - 168rpx);
				white-space: nowrap;
				padding: 16rpx;
				// padding-right: 56rpx;
				// background: #fff;
				// border-radius: 12rpx;
				.shop_item{
					width: 110rpx;
					display: inline-block;
					margin-right: 14rpx;
					text-align: center;
					.shop_img{
						width: 100%;
						height: 106rpx;
						position: relative;
						image{
							width: 100%;
							height: 100%;
						}
						.price{
							background: linear-gradient( 90deg, #FD8D44 0%, #FD4C49 100%);
							border-radius: 12rpx 12rpx 0rpx 0rpx;
							height: 28rpx;
							line-height: 28rpx;
							padding: 0 16rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							position: absolute;
							left: 0;
							right: 0;
							bottom: -8rpx;
							margin: auto;
							.small{
								font-size: 16rpx;
							}
						}
					}
					.title{
						font-size: 28rpx;
						color: #333333;
						margin-top: 14rpx;
					}
				}
			}
	}
	.paysu_btns{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 50rpx;
		display: flex;
		justify-content: space-evenly;
	}
	.go_home{
		width: 44%;
		height: 74rpx;
		background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
		border-radius: 38rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 74rpx;
		text-align: center;
	}
	.JcurSkill_lists {
		color: #303133;
		padding: 20rpx;
	}
	
	.list {
		background: #fff;
		border-radius: 12px;
		// box-shadow: 0 0 10px 3px #DCDFE6;
		margin: 0 0 20upx;
	
		.body {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx 20rpx;
			.logo{
				position: relative;
				height: 186rpx;
				width: 186rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10upx;
					display: block;
				}
				.tag{
					position: absolute;
					background: linear-gradient( 90deg, #BB2FF2 0%, #8615E1 100%);
					color: #fff;
					font-size: 20rpx;
					right: 0;
					top: 0;
					text-align: center;
					width: 60rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 2rpx 12rpx 0rpx 4rpx;
				}
				.shareprice{
					position: absolute;
					bottom: 0;
					left: 0;
					background: rgba(#000,.5);
					color: #fff;
					font-size: 18rpx;
					padding: 0 8rpx;
					border-bottom-left-radius: 15rpx;
					border-top-right-radius: 8rpx;
				}
			}
			
		}
	}
	
	.JcurSkill_list_cont {
		width: calc(100% - 186rpx);
		padding-left: 20rpx;
		.flex_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.title {
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 45upx;
			font-size: 32rpx;
			font-weight: bold;
	
			.icon {
				border: 2rpx #039140 solid;
				border-radius: 4upx;
				font-size: 20rpx;
				line-height: 26rpx;
				color: #039140;
				margin-right: 10rpx;
				padding: 0 6rpx;
			}
			.icon1{
				border: 1px $bg-color solid;
				border-radius: 4upx;
				background: $bg-color;
				font-size: 24rpx;
				line-height: 38rpx;
				padding: 0 6rpx;
				border-radius: 6upx;
				color: #fff;
				margin-right: 5rpx;
				height: 40rpx;
			}
		}
		.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.label {
			font-size: 28upx;
			color: #303133;
			margin-top: 8rpx;
			white-space: nowrap;
			.info{
				display: flex;
				color: #999999;
				font-size: 24rpx;
				align-items: center;
				view{
					margin-right: 24rpx;
				}
				.disNum{
					font-size: 26rpx;
					color: #8615E1;
					font-weight: 600;
					text{
						font-size: 20rpx;
						font-weight: 400;
					}
				}
				.dis{
					width: 98rpx;
					height: 38rpx;
					// background: #FBF8FE;
					background: linear-gradient( 270deg, #8816E1 0%, #B92DF1 100%);
					border-radius: 8rpx;
					// display: flex;
					// justify-content: space-around;
					// align-items: center;
					font-size: 20rpx;
					text-align: center;
					line-height: 38rpx;
					// color: #8615E1;
					color: #FFFFFF;
					margin-right: 14rpx;
				}
				.vip_zhekou{
					position: relative;
					margin-right: 10rpx;
					font-size: 26rpx;
					width: 128rpx;
					image{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 34rpx;
					}
					view{
						color: #FFF4CD;
						font-weight: 600;
						position: relative;
						padding-left: 38rpx;
						line-height: 34rpx;
						width: 100%;
						text-align: center;
						text{
							font-size: 20rpx;
							font-weight: 400;
							padding: 0;
						}
					}
				}
			}
			.short_add{
				color: #999999;
				font-size: 24rpx;
				.r_border{
					position: relative;
					padding-right: 14rpx;
				}
				.r_border:after {
					position: absolute;
					content: '';
					border-right: 1px #999999 solid;
					top: 50%;
					right: 0;
					height: 22rpx;
					transform: translateY(-50%);
				}
				.s_tit{
					margin-left: 10rpx;
				}
			}
			.addre{
				font-size: 24rpx;
				color: #333333;
				display: flex;
				align-items: center;
				image{
					width: 14rpx;
					margin-right: 4rpx;
				}
			}
			.other{
				display: flex;
				font-size: 24rpx;
				color: #999999;
				.gray{
					margin-right: 30rpx;
				}
			}
			.orderBuy{
				width: 140rpx;
				line-height: 46rpx;
				background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
				border-radius: 8rpx;
				color: #FFFFFF;
				text-align: center;
				font-size: 24rpx;
			}
		}
	}
	
	</style>